<html>
<head>
<meta  charset="UTF-8">
<title>艺术团</title>
<style type="text/css">
   canvas{ position:absolute; margin-top: 50px; margin-left: 70px;}
   canvas #canvas1{ z-index:1;}
   canvas #canvas2{ z-index:2;display:none}
 /*头部*/
.t-yan{width:1200px; height:16px; margin:0 auto; background:#1f6ab0}
.barder-r{width:240px; height:94px;margin-right: 180px; float:right; padding:10px 0 0 10px; color:#1f6ab0}
.barder-r a{ color:#1f6ab0}
.barder-r p{margin-bottom:10px;font-size:12px; }
.for{ width:215px; height:26px; }
.for img{float:right;}
#txt{float:left; width:182px; height:26px; border:2px solid #1f6ab0; color:#3075b9; font-size:16px; text-align:center}
/*tab*/
#box{width:525px;font-size:12px;margin-left: 550px;}
#box ul{margin:0;padding:0;list-style:none}
#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#1f6ab0;background:#E8F2F7;position:relative;top:1px}
#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}
#box #tab_con li{display:none;}
#box #tab_con #tab_con_1{display:block;height: 230px; font-size: 16px;}

#tab_con_2{display:block;height: 230px;font-size: 15px;color: red;}
#tab_con_3{display:block;height: 230px; font-size: 18px; }
/*jieshu*/
.jie{width:100%; height:45px; background:url(images/dibu-bg.jpg); padding-top:30px;margin-top: 50px;}
.shu p{color:#FFF; font-size:12px; text-align:center;  }

/**/
.se1 {background:#e8e6eb;  font-weight:bold;color:#167eff;}
.se2 a{ background:#167eff; color:#fff; padding:2px;}
/**/
.mian {width:1200px; margin:auto;padding-top:6px; background:#fff; padding:5px;}

.matter2{width:1200px; margin:auto;  margin-top:6px;}
.matter2 .info{ background:url(images/img_6.jpg) repeat-x; width:100%; height:57px; }
.matter2 .title{ background:url(images/img_35.jpg) no-repeat; width:369px; height:57px; float:left;}
.matter2 .title1{ background:url(images/img_36.jpg) no-repeat; width:369px; height:57px; float:left;}
.matter2 .more{ background:#168eff; width:40px; height:15px; float:right; text-align:center; margin-top:20px; float:right; margin-right:3px;  }
.matter2 .more a{color:#fff;font-size:8px;}
.matter2 .content{ width:100%; zoom:1; overflow:hidden;}

.matter2 .content .prod{ width:265px; float:left; margin:15px 20px 0px 13px; display:inline; background:#e8e6eb; }
.matter2 .content .prod .tip{ width:265px; height:140px;display: table-cell;vertical-align:middle;text-align:center;*display: block;*font-size: 0px; background:#e8e6eb;}
.matter2 .content .prod .tip img{ border:11px solid #e8e6eb; border-bottom:none;width: 235px;height: 125px;}
.matter2 .content .prod .scrt{padding:0px 10px; text-align:center; line-height:30px; height:30px; *line-height:48px;*height:40px;  _line-height:30px; _height:30px; zoom:1; overflow:hidden;  }
.matter2 .content .prod .scrt .zt{width:130px;  text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; float:left;color:blue;}
.matter2 .content .prod .scrt .rq{ float:right; color:#000000;}
.matter2 .content .prod .scrt a{color:blue;}
.matter2 .content .prod .scrt a:hover{color:#ff6600;}


.choose{ width:100%; margin:auto;}
.choose .select1{ width:100%; zoom:1; overflow:hidden; border:1px solid #eaeaea; border-left:none;}
.choose .select1 li{ float:left;  width:87px; height:32px; line-height:32px; text-align:center; border-left:1px solid #eaeaea;}
.choose .select1 li a{ color:#333; display:block;}
.choose .select1 li a:hover{ background:#e8e6eb; color:#167eff; font-weight:bold;}
.select2{ zoom:1; overflow:hidden; padding:10px 0px 0px 0px;}
.select2 ul li{ float:left; text-align:center; margin-left:20px;}
.select2 ul li a{ color:#167eff; padding:2px;}
.select2 ul li a:hover{ background:#167eff; color:#fff; padding:2px;}
/*分页部分代码*/
div.digg{padding:10px;margin:10px 3px;text-align:center}
div.digg a{border:#ccc 1px solid;padding:5px 15px;margin:3px;color:#3e71b9;text-decoration:none}
div.digg a:hover{border:#dcd9d4 1px solid;color:#ff6600;}
div.digg a:active{border:#dcd9d4 1px solid;color:#000;}
div.digg span.current{border:solid 1px #dcd9d4;padding:5px 15px;font-weight:bold;margin:3px;color:#fff;background-color:#3e71b9;}
div.digg span.disabled{border:#eee 1px solid;padding:5px 15px;margin:3px;color:#ddd;}

</style>

</head>
<body onLoad="window_onload()">
<canvas id="canvas1" width="480px" height="560px" "></canvas>
<canvas id="canvas2" width="200px" height="200px" "></canvas>
<script type="text/javascript">
function window_onload(){
	var canvas1 = document.getElementById("canvas1")
	var context = canvas1.getContext("2d")
	var image = new Image();
	image.src="images/50.jpg";
	image.onload=function(){
	context.drawImage(image,0,0)
	}
	canvas1.onmousemove=canvas1_onmouse_move;
}
function canvas1_onmouse_move(ev){
	var canvas1,canvas2;
	var x,y;
	canvas1=document.getElementById("canvas1");
	canvas2=document.getElementById("canvas2");
	var context=canvas2.getContext("2d");
	canvas2.style.display="inline";
	 context.clearRect(0,0,canvas2.width,canvas2.height);
	 x=ev.pageX-canvas1.offsetLeft+2;
	 y=ev.pageX-canvas1.offsetTop+2;
	 canvas2.style.left=(ev.pageX+2)+"px";
	 canvas2.style.top=(ev.pageX+2)+"px";
	 var image = new Image();
	image.src="images/50.jpg";
	context.drawImage(image,x,y,200,200,0,0,400,400)
	}
</script>
<div class="t-yan"></div>

<div class="barder-r">
<p><a  href="index.html">首页</a>丨<a href="#">登录</a>丨<a href="#">注册</a>丨<a href="#">管理中心</a></p>
<div class="for">
<form >
<input type="text"value="消息搜索"id="txt"/>
<input type="image" src="images/suosou.jpg" />
</form>
</div>
</div>
</div>
<!-- tab -->
<div id="box">
    <ul id="tab">
        <li class="on" id="tab_1" onClick="switchTab(1)">校园活动</li>
        <li id="tab_2" onClick="switchTab(2)">社团招募</li>
        <li id="tab_3" onClick="switchTab(3)">社团咨询</li>
    </ul>
    <ul id="tab_con">
        
        	
        		<li id="tab_con_1">
        		我校即将举办十佳歌手大赛，请关注最新动态<br>
        		大一新生晚会将于9.10下午3:00举办<br>
        		各社团招募在即，望大家踊跃参与<br>
        		辩论大赛已圆满落幕，相关成绩请关注东软42首页<br>
        		社团招聘会将于9.18下午3:00举办<br>
        		我校即将举办演讲大赛，请关注最新动态<br>
        		我校即将举办拔河大赛，请关注最新动态<br>
        		舞蹈大赛已圆满落幕，相关成绩请关注东软42首页<br>
        		名师演讲会将于9.19下午6:00举办<br> 
        		开源社团招募<br> 
        		社团迎新在即，请关注最新动态
        		<br> 
        		</li>
        				      
        
        <li id="tab_con_2"><h4>东软信息学院社团招募启事</h4>
亲爱的同学们：<br>
伴随着如歌的岁月，我们以绽放的笑容在皖中美丽的校园里学习与生活。与此同时，东软学生社团也正式宣告成立。
学生社团是在校团委领导下为学生们丰富学习生活提高自身技能和素质、开辟第二课堂而发起的组织。<br>
学生社团承载着同学们的创造热情与兴趣爱好，搭建起让更多学生张扬个性的舞台，在这充满激情与活力的舞台上，你们将是主角。
希望一批有共同素养的人组成一个和谐，温馨的团队！<br>
我们快乐着，我们享受着团队的美！<br>
如果你认可团队,如果你明白团队的意义和功用,
那么你可以加入了!<br>
欢迎你!<br></li>
        <li id="tab_con_3">社团正在纳新中......</li>
    </ul>
</div>

<script type="text/javascript">
function switchTab(n){
    for(var i = 1; i <= 3; i++){
        document.getElementById("tab_" + i).className = "";
        document.getElementById("tab_con_" + i).style.display = "none";
    }
    document.getElementById("tab_" + n).className = "on";
    document.getElementById("tab_con_" + n).style.display = "block";
}
</script>
<!-- xiamian -->
<div class="mian">
<div class="matter2">
            	<div class="info">
                	<div class="title1"></div>
                </div>
                <div class="choose">
                	<div class="select1">
                    	<ul>
                        	<li class="se1"><a href="#">全部</a></li>
                            <li class=""><a href="#">一月份</a></li>
                            <li class=""><a href="#">二月份</a></li>
                            <li class=""><a href="#">三月份</a></li>
                            <li class=""><a href="#">四月份</a></li>
                            <li class=""><a href="#">五月份</a></li>
                            <li class=""><a href="#">六月份</a></li>
                            <li class=""><a href="#">七月份</a></li>
                            <li class=""><a href="#">八月份</a></li>
                            <li class=""><a href="#">九月份</a></li>
                            <li class=""><a href="#">十月份</a></li>
                            <li class=""><a href="#">十一月份</a></li>
                            <li class=""><a href="#">十二月份</a></li>
                        </ul>
                    </div>
                    <div class="select2">
                   	  <ul>
                        	<li class="se2"><a href="#"><strong style="color:#fff;">全部：</strong></a></li>
                            <li><a href="#">校园活动</a></li>
                            <li><a href="#">校外活动</a></li>
                      </ul>
                    </div>
                </div>
              <div class="content">
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/11.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2016-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/12.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2016-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/13.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2016-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/14.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/15.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/16.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/17.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
              		</div>
                    <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/18.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
              		</div>
                          <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/19.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                         <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/20.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                          <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/21.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                          <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/22.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                          <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/23.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                          <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/24.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                          <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/25.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                         <div class="prod">
                        <div class="tip"><a href="#"><img src="images/picture/26.jpg" onload="javascript:DrawImage(this,205,125)"></a></div>
                        <div class="scrt"><div class="zt"><a href="#">2016社团部分学员留影</a></div><div class="rq">
2015-12-13</div>
                        </div>
                    </div>
                    
                </div>
                <div class="digg"><span class="disabled"> < </span><span class="current">1</span><a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a><a href="#?page=2"> > </a></div>
            </div>
 </div>

<!--jieshu-->
<div class="jie">
<div class="shu"><p>联系我们 　 计算机科学与技术系:　14007班   14110100731　  　李簿原        Web:www.mycodes.net</p></div>
</div> 
</body>
</html>